<template>
  <list-page
      v-model:list="orderList"
      :requestParams="requestParams"
      :requestMethod="init"
      ref="listPageRef"
    >
      <template #header>
        <up-sticky :offsetTop="0" :customNavHeight="0">
          <view style="background-color: #ffffff;" class="u-m-l-20 u-m-r-20">
            <up-tabs
              :list="list2"
              :itemStyle="itemStyle"
              :lineWidth="68"
              :lineHeight="32"
              lineColor="#1989fa"
              :activeStyle="activeStyle"
              v-model:current="currentIndex"
              @change="handleChange"
            ></up-tabs>
          </view>
        </up-sticky>
      </template>
      <template #default>
        <up-list-item v-for="(item, index) in orderList" :key="index">
          <orderItem :data="item" @reset="reloadList" />
        </up-list-item>
      </template>
    </list-page>
</template>

<script>
import { orderEnum } from '@/utils/common';
import orderItem from './orderItem.vue';
export default {
  components: {
    orderItem
  },
  data() {
    return {
      currentIndex: 0,
      orderList: [],
      counter: {},
      itemStyle: {
        padding: '10px 10px 10px 25px',
        fontSize: '14px'
      },
      activeStyle: {
        color: '#ffffff',
        position: 'relative',
        'z-index': 2,
      }
    }
  },
  computed: {
    requestParams() {
      return {
        searchKey: '',
        status: +this.list2[this.currentIndex].status
      }
    },
    list2() {
      return Object.keys(orderEnum).sort((a, b) => {
        return a - b
      })
      .map(key => {
        return {
          name: orderEnum[key].name,
          status: key,
          show: orderEnum[key].show,
          badge: {
            value: orderEnum[key].prop ? this.counter[orderEnum[key].prop] : ''
          }
        }
      })
      .filter(item => item.show)
    }
  },
  onLoad() {
    this.getCounter()
    this.reloadList()
  },
  onShow() {
    
  },
  methods: {
    init(params) {
      return this.$api.order.page(params)
    },
    reloadList() {
      setTimeout(() => {
        this.$refs.listPageRef.reset()
      }, 200)
    },
    async getCounter() {
      const {data} = this.$api.order.counter().then(res => {
        this.counter = data || {}
      })
    },
    handleChange() {
      this.orderList = [];
      this.reloadList();
    }
  },
}
</script>

<style lang="scss" scoped>
:deep(.u-tabs__wrapper__nav__line) {
  background-color: $u-main-color !important;
  z-index: 1 !important;
  top: 5px !important;
  left: 7px !important;
}
</style>